<template>
	<div class="root">
		<van-form class="userinfo">
		  <van-field
		    v-model="username"
		    name="真实姓名"
		    label="真实姓名"
		    placeholder="请输入真实姓名"
				input-align="right"
				left-icon="http://qnkf.laigl.com/mobilepng/add_name.png"
		  />
		  <van-field
		    readonly
		    clickable
		    name="picker"
		    :value="gender"
		    label="性别"
		    placeholder="点击选择"
		    @click="showPicker = true"
				input-align="right"
				left-icon="http://qnkf.laigl.com/mobilepng/add_xingbie.png"
		  />
		  <van-popup v-model="showPicker" position="bottom">
		    <van-picker
		      show-toolbar
		      :columns="columns"
		      @confirm="setGender"
		      @cancel="showPicker = false"
		    />
		  </van-popup>
			<van-field
			  v-model="phone"
			  name="联系方式"
			  label="联系方式"
			  placeholder="请输入联系方式"
				input-align="right"
				type="tel"
				left-icon="http://qnkf.laigl.com/mobilepng/add_shouji.png"
			/>
			<van-field
			  v-model="company"
			  name="单位"
			  label="单位"
			  placeholder="请输入单位"
				input-align="right"
				left-icon="http://qnkf.laigl.com/mobilepng/add_symptom.png"
			/>
		</van-form>
		<button class="sub-button" @click="onSubmit">
		  保存
		</button>
	</div>
</template>

<script>
	import { Notify} from 'vant';
	export default {
	  data() {
	    return {
	      username:'',
	      birthday:'',
	      phone:'',
				occupation:'',
	      company:'',
	      discribe:'',
				gender:'',
				disgender:false,//禁用性别输入框
				showgender:false,//显示隐藏性别选择器
				columns:["男生","女生"],
				showPicker:false,//性别选择
				showCalendar:false,//日期选择
				time:'点击设置',
				id:'',
	    };
	  },
		created() {
			this.getuserinfo()
		},
		methods:{
			// 获取用户信息
			getuserinfo(){
				let openid = localStorage.getItem('openid')
				this.$axios.post('/user/index',{openid})
				.then(res=>{
					console.log(res.data.data.user_info[0])
					this.username = res.data.data.user_info[0].nick_name||''
					this.gender = res.data.data.user_info[0].sex==0?'女生':'男生'||''
					this.phone = res.data.data.user_info[0].phone||''
					this.occupation = res.data.data.user_info[0].duty||''
					this.company =res.data.data.user_info[0].units||''
					this.id = res.data.data.user_info[0].id||''
				})
				.catch(err=>{
					console.log(err)
				})
			},
			goNext(){
				this.$router.push('./report')
			},
			setGender(value, index){
				this.gender = value
				this.showPicker = false
			},
			// 选择性别
			selectGender(value, index){
				console.log('触发')
				this.disgender = true
				this.showgender = true
			},
			onChange(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
			},
			onCancel() {
				Toast('取消');
			},
			onSubmit(){
				// this.$router.push('./mine')
				this.$axios.post('user/edit',
				{
					user_id:this.id,
					relname:this.username,
					sex:this.gender=='男生'?'1':'0',
					units:this.company,
					phone:this.phone,
					duty:this.occupation
				})
				.then(res=>{
					if(res.data.code==2000){
						Notify({ type: 'success', message: res.data.msg });
						this.$router.push('/mine')
					}else{
						Notify({ type: 'danger', message: res.data.msg });
					}
				})
			},
			onConfirm(date) {
				this.value = `${date.getMonth() + 1}/${date.getDate()}`;
				this.showCalendar = false;
			},
		}
	};
</script>

<style scoped lang="less">
	.root{
		overflow: hidden;
		padding: 2rem 0 0 1rem;
		.avatar{
			width: 20rem;
			margin-left: 3rem;
			text-align: center;
			height: 8rem;
			.van-button{
				width: 6rem;
				height: 6rem;
				margin-top: 2rem;
				border-radius: 50%;
				.van-icon{
					color: #ccc;
					font-size: 2rem;
				}
			}
		}
		.sub-button{
			width: 90vw;
			height: 3.8rem;
			box-sizing: border-box;
			background: linear-gradient(to right, #1FCAD1, #0383C4);
			border: none;
			outline: none;
			position: fixed;
			bottom: 10rem;
			left: 5vw;
			border-radius: 3rem;
			color: #fff;
			font-size: 1.3rem;
		}
	}
</style>
